<template>
  <div class="app-container">
    <div style="background-color: #fff; padding-bottom: 1rem">
      <el-form inline size="small">
        <el-form-item label="登录状态">
          <el-select
            v-model="dataParams.loginFlag"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" icon="el-icon-search" @click.native.prevent="getDataList"/>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      :header-cell-style="{ background: '#FAFBFD', color: '#6D6D6D'}"
      style="width: 100%; margin-bottom: 3rem;"
      border
      size="medium"
      show-summary
      :row-style="{cursor: 'pointer'}"
    >
      <el-table-column
        v-for="(item, index) in tableTitles"
        :index="index"
        :key="index"
        :prop="item.name"
        :label="item.title"
        align="center"
        :sortable="item.sortable"
      />
    </el-table>
  </div>
</template>

<script>
import { jsonToParams } from '@/utils'

import { GetLoginUserDetails } from '@/api/Report'
import { TipsBox } from '@/utils/feedback'

export default {
  name: 'Detail',
  data() {
    return {
      tableTitles: [
        {
          title: '用户',
          name: 'UserName'
        },
        {
          title: '是否登录',
          name: 'LoginFlag',
          sortable: true
        }
      ],
      options: [
        {
          label: '登录',
          value: 1
        },
        {
          label: '未登录',
          value: 0
        }
      ],
      tableData: [],
      dataParams: {
        loginFlag: ''
      }
    }
  },
  watch: {
    // 监听对象temp，
    dataParams: {
      handler(newVal) {
        this.getDataList()
      },
      deep: true
    },
    $route: {
      handler(newVal) {
        if (newVal.name === 'Detail' && this.dataParams.companyId !== newVal.query.companyId) {
          this.dataParams = { ...this.dataParams, ...newVal.query }
        }
      },
      deep: true
    }
  },
  created() {
    if (!this.$route.query.companyName || !this.$route.query.companyId) {
      return TipsBox('error', '未提供正确的参数')
    }

    // this.$route.meta.title = this.$route.params.companyName
    this.dataParams = { ...this.dataParams, ...this.$route.query }
  },
  methods: {
    getDataList() {
      GetLoginUserDetails(jsonToParams(this.dataParams)).then(res => {
        if (res.statusCode === 200) {
          this.tableData = res.data
        }
      })
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return rowIndex === 0 ? [row.Count, 1] : [0, 0]
      }
    }
  }
}
</script>

<style scoped>

</style>
